<template>
    <div class="videos-list-page" style="margin-top: 20px;">
      <ul class="games-data" :class="[model]">
        <li v-for="(item, idx) in data" :key="idx" class="dx-vd-item"  @click="currentItem=item;showPlay=true">
          <div class="main-box">
            <img loading="lazy" :src="item.image" alt="">
            <span class="play-icon"></span>
          </div>
          <!-- <div class="global-img-fun-pos">
            <a class="hid-el fav-btn" @click.stop="item.selected = true; showFav = true"></a>
            <a class="hid-el global-parise-btn">0</a>
            <a class="hid-el select-btn" :class="{ active: item.selected }" @click="item.selected = !item.selected"></a>
          </div> -->
          <div class="con-mask hid-el"></div>
          <a class="title hid-el">{{ item.title }}</a>
        </li>
      </ul>
  
      <PlayVideo v-if="showPlay" :data="currentItem" @close="showPlay=false"/>
  
      <!-- <transition name="fade"> -->
      <gameInfo @close="onInfoClose" v-if="showInfo" :id="currentId" />
      <!-- </transition> -->
    </div>
  </template>
  
  <script>
  import PlayVideo from '@/components/playvideo'
  import pswiper from '@/components/pswiper'
  import moment from 'moment'
  import gameInfo from '@/components/gameInfo'
  import api from '@/api/api'
  export default {
    components: { gameInfo, pswiper,PlayVideo},
    data() {
      return {
        currentItem:{},
        showPlay:false,
        gTypesT: ['常用基础', '游戏角色', '游戏内容', '玩家'],
        gTypes: [{ selected: false, title: "标题界面" }, { selected: false, title: "登录注册" }, { selected: false, title: "服务器选择" }, { selected: false, title: "角色创建" }],
        gTypes1: [{ selected: false, title: "主菜单" }, { selected: false, title: "游戏公告" }, { selected: false, title: "关卡选择" }, { selected: false, title: "备战界面" }, { selected: false, title: "大厅" }],
        gTypes2: [{ selected: false, title: "画面" }, { selected: false, title: "声音" }, { selected: false, title: "操作" }, { selected: false, title: "账户" }, { selected: false, title: "其他" }],
        gTypes3: [{ selected: false, title: "转场" }, { selected: false, title: "载入画面" }, { selected: false, title: "进度条" }, { selected: false, title: "加载保存" }, { selected: false, title: "下载进度" }, { selected: false, title: "副本排队" }],
        isFocus: false,
        model: 'small',
        currentId: '',
        showInfo: false,
        keyword: '',
        gTypes: [],
        list: [],
        queryParams: {
          pageNum: 1,
          pageSize: 35
        },
        total: 0,
        hasMore: true,
        scrollLoaded: false,
        allCates: [],
        curAllCateKey: '',
        curCates: [],
        curFullPath: ''
      }
    },
    props:['data'],
    async mounted() {
        return;
      let start = new Date();
      let starttime = moment(start).format('YYYY-MM-DD');
      let end = new Date(start.setDate(start.getDate() + 1));
      let endtime = moment(end).format('YYYY-MM-DD')
      let res = await api.articlelist({ orderByColumn: 'see', isAsc: 'desc', startTime: starttime, endTime: endtime, pageNum: 1, pageSize: 8 })
  
      this.curFullPath = this.$route.fullPath;
  
      let _gTypes = localStorage.getItem('G-TYPES')
      _gTypes = JSON.parse(decodeURIComponent(_gTypes))
      this.gTypes = _gTypes
  
      let _allCates = JSON.parse(decodeURIComponent(localStorage.getItem('CATE-ALL-TYPES')))
      this.curAllCateKey = _allCates[1].key
      this.curCates = _allCates[1].result
      this.allCates = _allCates
      this.queryList()
  
      let that = this
      $(document).on('scroll', function (e) {
        if (that.showInfo) return
        let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight
  
        if (that.scrollLoaded == false) return
        if (jHeight <= 200 && that.hasMore) {
          that.scrollLoaded = false
          that.handleLoadingMore()
        }
      })
    },
    methods: {
      handleCancelByGtypeAll() { },
      handleConfirmByGTypeSearch() { },
      chooseByCate(_item) {
        this.queryParams.categoryIds = _item.value;
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      chooseDevice(_device) {
        this.queryParams.device = _device == this.queryParams.device ? '' : _device;;
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      handleSearch() {
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      chooseScreen(_screen) {
        this.queryParams.orientation = _screen == this.queryParams.orientation ? '' : _screen;
  
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      onInfoClose() {
        window.history.pushState({}, 0, this.curFullPath);
        document.body.style.overflow = 'inherit';
        this.showInfo = false;
      },
      handleShowInfo(_item) {
        window.history.pushState({}, 0, '/game/' + _item.id);
        this.currentId = _item.id;
        document.body.style.overflow = 'hidden';
        this.showInfo = true;
      },
      handleCancelAllCate() {
        this.allCates.map((item) => {
          item.result.map((cate) => {
            cate.checked = false
          })
        })
        this.$forceUpdate()
      },
      handleConfirmSelectCate() {
        let datas = this.allCates.filter((r) => {
          return r.key == 'theme'
        })[0].result;
  
        let tags = [];
        datas.map(item => {
          if (item.checked) {
            tags.push(item.title);
          }
        })
        datas = this.allCates.filter((r) => {
          return r.key == 'style'
        })[0].result;
  
        let style = '';
        datas.map(item => {
          if (item.checked) {
            style = item.title;
          }
        })
  
        let categoryIds = [];
        datas = this.allCates.filter((r) => {
          return r.key == 'categoryThirdId'
        })[0].result;
        datas.map(item => {
          if (item.checked) {
            categoryIds.push(item.id);
          }
        })
  
        datas = this.allCates.filter((r) => {
          return r.key == 'era'
        })[0].result;
  
        let era = '';
        datas.map(item => {
          if (item.checked) {
            era = item.title;
          }
        })
  
        this.queryParams.tags = tags;
        this.queryParams.style = style;
        this.queryParams.categoryIds = categoryIds;
        this.queryParams.era = era;
        this.queryParams.pageNum = 1;
        this.list = [];
        this.scrollLoaded = false;
        this.hasMore = true;
        this.queryList();
      },
      chooseCate(_cate) {
        if (this.curAllCateKey == 'style' || this.curAllCateKey == 'era') {
          if (_cate.checked) {
            _cate.checked = !_cate.checked;
          }
          else {
            this.curCates.map(item => {
              item.checked = false;
            })
            _cate.checked = true;
          }
          this.$forceUpdate()
          return;
        }
        if (_cate.checked) {
          _cate.checked = !_cate.checked;
        } else {
          _cate.checked = !_cate.checked
        }
  
        this.$forceUpdate()
      },
      chooseCateByKey(_key) {
        this.curAllCateKey = _key
        this.curCates = this.allCates.filter((r) => {
          return r.key == _key
        })[0].result
      },
      handleLoadingMore() {
        this.queryParams.pageNum++
        this.queryList()
      },
      async queryList() {
        var that = this
  
        let result = await api.videoList(that.queryParams)
  
        let old = that.list
  
        that.list = [...old, ...result.data]
  
        that.total = result.total
  
        let totalPage = result.total % that.queryParams.pageSize == 0 ? result.total / that.queryParams.pageSize : parseInt(result.total / that.queryParams.pageSize) + 1
        if (result.data && (result.data.length < that.queryParams.pageSize || that.queryParams.pageNum >= totalPage)) {
          that.hasMore = false
        } else {
          that.hasMore = true
        }
        that.scrollLoaded = true
      },
      version(time) {
        let date = new Date(time)
        return date.getTime()
      },
      handleGmCatePrev() {
        this.gmswiper.slidePrev()
      },
      handleGmCateNext() {
        this.gmswiper.slideNext()
      },
    },
  }
  </script>
  
  <style lang="less">
  .videos-list-page {
    .gp-filter {
      position: sticky;
      top: 149px;
      // z-index:1;
      // margin-top:20px;
      // padding-top:10px;
      // margin-bottom:21px;
      padding-bottom: 21px;
      padding-top: 20px;
      margin-bottom: 0px;
      margin-top: 0px;
    }
  
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity .1s;
    }
  
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }
  
  
    @keyframes opacity {
      0% {
        opacity: 0;
      }
  
      50% {
        opacity: .5;
      }
  
      100% {
        opacity: 1;
      }
    }
  
    .games-data {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      grid-gap: 20px;
  
      .dx-vd-item {
        // width:312px !important;
        height: 175px;
        // min-width:312px;
        border-radius: 16px;
        overflow: hidden;
        // margin-right:20px;
        position: relative;
        cursor: pointer;
        border:2px solid transparent;
        animation:opacity .2s linear;
        transition:.2s all linear;
        .hid-el {
          // display: none;
          opacity: 0;
        }
  
        &:hover {
          border-color:#11CCB1;
          cursor: pointer;
  
          a {
            >img {
              transform: scale(1.08);
            }
          }
  
          .hid-el {
            // display: inline-block;
            opacity: 1;
  
            transition: 0.1s all linear;
          }
        }
  
        .play-icon {
          background: url('../../assets/pro/home_v_play.svg') no-repeat;
          background-position: center center;
          display: inline-block;
          width: 80px;
          height: 80px;
          position: absolute;
          z-index:1;
          left: calc((100% - 80px) / 2);
          top: calc((100% - 80px) / 2);
        }
  
        .con-mask {
          height: 129px;
          position: absolute;
          bottom: 0px;
          left: 0px;
          right: 0px;
          cursor: default;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
        }
  
        .main-box {
          display: inline-block;
          width: 100%;
          height: 100%;
  
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
  
        .title {
          background: url('../../assets/pro/icon_video_transfer.svg') no-repeat;
          background-position: left center;
          background-size: 16px 16px;
          position: absolute;
          bottom: 11px;
          padding-left: 20px;
          left: 14px;
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
  }
  </style>